﻿
/*
    Main color: #428BCA
    Border color: #99C1E2
*/

body {
    font-family: 'nunito_for_arco', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    font-weight: 400;
}

body.f-body {
    padding: 20px;
}

:root {
    --color-Primary: #409EFF;
    --color-Success: #67C23A;
    --color-Warning: #E6A23C;
    --color-Danger: #F56C6C;
    --color-Info: #909399;
    --color-PrimaryText: #303133; /*主要文本 */
    --color-RegularText: #606266; /*常规文本 */
    --color-SecondaryText: #909399; /*次要文本 */
    --color-Placeholder: #C0C4CC; /*占位 */
    --color-BorderBase: #DCDFE6;
    --color-BorderLight: #E4E7ED;
    --color-BorderLighter: #EBEEF5;
    --color-BorderExtralight: #F2F6FC;
    --color-BackgroundB: #000000;
    --color-BackgroundW: #FFFFFF;
    --color-Background-1: #eee;
    --color-Background: transparent;
    --f-corner-border-radius: 4px
}

.f-widget-content {
    border-color: var(--color-BorderBase);
    background-color: var(--color-BackgroundW);
    color: var(--color-RegularText);
}

.f-widget-content a {
    color: var(--color-RegularText);
}

.f-widget-header {
    border-color: var(--color-BorderBase);
    background-color: var(--color-BackgroundW);
    color: var(--color-PrimaryText);
    padding: 15px 20px;
}

.f-widget-header a {
    color: var(--color-PrimaryText);
}

.f-state-default,
.f-widget-content .f-state-default,
.f-widget-header .f-state-default {
    border-color: var(--color-BorderBase);
    background-color: var(--color-BackgroundW);
    color: var(--color-RegularText);
}

.f-state-default a,
.f-state-default a:link,
.f-state-default a:visited {
}

.f-state-hover,
.f-widget-content .f-state-hover,
.f-widget-header .f-state-hover,
.f-state-focus,
.f-widget-content .f-state-focus,
.f-widget-header .f-state-focus {
    border-color: var(--color-BorderBase);
    background-color: var(--color-BackgroundW);
    color: var(--color-Primary);
}

.f-state-hover a,
.f-state-hover a:hover,
.f-state-hover a:link,
.f-state-hover a:visited,
.f-state-focus a,
.f-state-focus a:hover,
.f-state-focus a:link,
.f-state-focus a:visited {
    color: var(--color-Primary);
}

.f-state-active,
.f-widget-content .f-state-active,
.f-widget-header .f-state-active {
    border-color: var(--color-BorderBase);
    background-color: var(--color-BackgroundW);
    color: var(--color-Primary);
}

.f-state-active a,
.f-state-active a:link,
.f-state-active a:visited {
    color: var(--color-Primary);
}

.f-state-highlight,
.f-widget-content .f-state-highlight,
.f-widget-header .f-state-highlight {
    border-color: #BF8A8A;
    background-color: var(--color-BackgroundW);
    color: #000;
}

.f-state-highlight a,
.f-widget-content .f-state-highlight a,
.f-widget-header .f-state-highlight a {
}

.f-state-error,
.f-widget-content .f-state-error,
.f-widget-header .f-state-error {
    border-color: #ffa8a8;
    background-color: #fff8f8;
    color: #000;
}

.f-state-error a,
.f-widget-content .f-state-error a,
.f-widget-header .f-state-error a {
}

.f-state-error-text,
.f-widget-content .f-state-error-text,
.f-widget-header .f-state-error-text {
    color: #000;
}

.f-state-disabled,
.f-widget-content .f-state-disabled,
.f-widget-header .f-state-disabled {
    opacity: .5;
    filter: alpha(opacity=50);
    background-image: none;
}

.f-state-disabled .f-icon {
    filter: alpha(opacity=50);
}

.f-icon,
.f-widget-content .f-icon {
    color: var(--color-RegularText);
}

.f-widget-header .f-icon {
    color: var(--color-RegularText);
    font-size: 18px;
}

.f-state-default .f-icon {
    color: var(--color-RegularText);
}

.f-state-hover .f-icon,
.f-state-focus .f-icon {
    color: #6ea6cc;
}

.f-state-active .f-icon {
    color: var(--color-Primary);
}

.f-state-highlight .f-icon {
    color: var(--color-RegularText);
}

.f-state-error .f-icon,
.f-state-error-text .f-icon {
    color: #ff6c6c;
}

.f-corner-all,
.f-corner-top,
.f-corner-left,
.f-corner-tl {
    border-top-left-radius: var(--f-corner-border-radius);
}

.f-corner-all,
.f-corner-top,
.f-corner-right,
.f-corner-tr {
    border-top-right-radius: var(--f-corner-border-radius);
}

.f-corner-all,
.f-corner-bottom,
.f-corner-left,
.f-corner-bl {
    border-bottom-left-radius: var(--f-corner-border-radius);
}

.f-corner-all,
.f-corner-bottom,
.f-corner-right,
.f-corner-br {
    border-bottom-right-radius: var(--f-corner-border-radius);
}

/* Special - header active state */
.f-widget-header .f-state-active {
    background-color: #d5e1eb;
}

/* CheckBox - RadioButton */
.f-checkbox.f-checked,
.f-checkbox.f-checkbox-indeterminate {
    background-color: var(--color-Primary);
    border-color: var(--color-Primary);
}

.f-radiobutton:after {
    background-color: var(--color-Primary);
}

.f-radiobutton.f-checked {
    border-color: var(--color-Primary);
}

.f-state-focus.f-checkbox,
.f-state-focus.f-radiobutton {
    border-color: #1b6aaa;
}

.f-state-focus.f-checkbox.f-checked {
    border-color: #1b6aaa;
    background-color: #1b6aaa;
}

.f-state-focus.f-radiobutton.f-checked {
    border-color: #1b6aaa;
}

.f-state-focus.f-radiobutton.f-checked:after {
    background-color: #1b6aaa;
}

.f-menu-item-icon.f-menu-radiobutton.f-checked {
    color: var(--color-Primary);
}

.f-field-checkbox-switch.f-checked {
    background-color: var(--color-Primary);
    border-color: var(--color-Primary);
}

.f-state-focus.f-field-checkbox-switch.f-checked {
    background-color: #1b6aaa;
    border-color: #1b6aaa;
}

.f-state-focus.f-field-checkbox-switch {
    background-color: #bbb;
    border-color: #bbb;
}

/* Special - Remove border-color for hover state */
.f-tab-header.f-state-active,
.f-tab-header.f-state-hover,
.f-grid-colheader-trigger.f-state-hover,
.f-grid-colheader.f-state-hover {
    border-color: var(--color-BorderBase);
}

/* Special */
.f-accordion > .f-panel-bodyct > .f-panel-body {
    background-color: var(--color-BackgroundW);
}

/*.f-tree-headerstyle .f-panel-body {
    background-color: var(--color-BackgroundW);
}

.f-tree-headerstyle .f-tree-node.f-tree-node-toplevel .f-tree-cell-inner,
.f-tree-minimode-item-inner {
    border-color: var(--color-BorderBase);
}*/

.f-tabstrip-plain > .f-panel-bodyct > .f-panel-body,
.f-tabstrip-plain > .f-panel-header,
.f-tabstrip-plain > .f-panel-header .f-panel-tools,
.f-tabstrip-bordercolor .f-tab-header {
    border-color: var(--color-BorderBase);
}

.f-tabstrip-plain > .f-panel-bodyct > .f-toolbar {
    border-left-color: var(--color-BorderBase);
    border-right-color: var(--color-BorderBase);
}

.f-tabstrip-plain.f-tabstrip-header-top > .f-panel-header .f-tabstrip-scroller,
.f-tabstrip-plain.f-tabstrip-header-right > .f-panel-header .f-tabstrip-scroller {
    border-bottom-color: var(--color-BorderBase);
}

.f-tabstrip-plain.f-tabstrip-header-bottom > .f-panel-header .f-tabstrip-scroller,
.f-tabstrip-plain.f-tabstrip-header-left > .f-panel-header .f-tabstrip-scroller {
    border-top-color: var(--color-BorderBase);
}

.f-widget-content.f-tab {
    /*padding: 0px 20px;*/
    background-color: var(--color-Background-1);
}

.f-tab-header.f-state-active {
    background-color: var(--color-BackgroundW);
}

.f-tabstrip-header .f-tab-header.f-state-active:after {
    background-color: var(--color-BackgroundW);
}

.f-tab-header.f-state-active .f-icon {
    color: var(--color-Primary);
}

.f-tabstrip-header .f-tabstrip-header-inkbar {
    background-color: var(--color-Primary);
}

.f-tabstrip-inkbar > .f-tabstrip-header .f-tab-header.f-state-active {
    /*background-color: var(--color-BackgroundW);*/
}

/*.f-grid-selectedcell-border {
    border-color: #d5d5d5 !important;
}*/

.f-grid-row-lines .f-grid-cell,
.f-grid-column-lines .f-grid-cell,
.f-grid-row-lines .f-grid-rowexpander > td {
    border-color: var(--color-BorderLighter) !important;
}

/*
.f-mainheader {
    border-color: #fff;
    color: var(--color-PrimaryText);
    border-bottom: solid 3px #eee;
}
*/

.f-mainheader a,
.f-mainheader .f-icon,
.f-mainheader .f-btn-text,
.f-mainheader .f-btn .f-btn-text {
    color: var(--color-PrimaryText);
}

.f-mainheader .f-btn.f-state-hover,
.f-mainheader .f-btn.f-state-focus {
    background-color: #d5e1eb;
}

.f-mainheader .f-btn.f-state-hover .f-btn-text,
.f-mainheader .f-btn.f-state-hover .f-icon,
.f-mainheader .f-btn.f-state-focus .f-btn-text,
.f-mainheader .f-btn.f-state-focus .f-icon {
    color: var(--color-Primary);
}

/*
.f-widget-header.f-subheader {
    background-color: var(--color-BackgroundW);
}
*/

.f-window {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-BorderBase);
}

.f-window > .f-panel-header {
    border-color: var(--color-BorderBase);
    background-color: var(--color-BackgroundW);
    color: var(--color-RegularText);
}

.f-window > .f-panel-header .f-icon {
    color: var(--color-RegularText) !important;
}

.f-window > .f-panel-header .f-tool.f-state-hover {
    background-color: #539fe1;
}

.f-btn.f-btn-small {
    border-width: 1px;
}

.f-btn .f-icon {
    color: var(--color-RegularText);
}

.f-btn.f-state-default .f-icon,
.f-btn.f-state-active .f-icon,
.f-btn.f-state-hover .f-icon,
.f-btn.f-state-focus .f-icon {
    color: #fff;
}

.f-btn .f-btn-text {
    color: #fff;
}

.f-toolbar.f-state-default,
.f-btn.f-state-default {
    background-color: var(--color-Primary);
    border-color: var(--color-Primary);
}

.f-btn.f-state-hover,
.f-btn.f-state-focus {
    background-color: #1b6aaa;
    border-color: var(--color-Primary);
}

.f-btn.f-state-active {
    background-color: #1b6aaa;
    border-color: #1b6aaa;
}

.f-state-default .f-btn,
.f-state-default .f-btn .f-icon {
    color: #fff;
}

.f-btn.f-btn-gray.f-state-default {
    background-color: #abbac3;
    border-color: #abbac3;
}

.f-btn.f-btn-gray.f-state-hover,
.f-btn.f-btn-gray.f-state-focus {
    background-color: #8b9aa3;
    border-color: #abbac3;
}

.f-btn.f-btn-gray.f-state-active {
    background-color: #abbac3;
    border-color: #8b9aa3;
}

.f-btn.f-btn-info.f-state-default {
    background-color: #6fb3e0;
    border-color: #6fb3e0;
}

.f-btn.f-btn-info.f-state-hover,
.f-btn.f-btn-info.f-state-focus {
    background-color: #4f99c6;
    border-color: #6fb3e0;
}

.f-btn.f-btn-info.f-state-active {
    background-color: #6fb3e0;
    border-color: #4f99c6;
}

.f-btn.f-btn-success.f-state-default {
    background-color: #87b87f;
    border-color: #87b87f;
}

.f-btn.f-btn-success.f-state-hover,
.f-btn.f-btn-success.f-state-focus {
    background-color: #629b58;
    border-color: #87b87f;
}

.f-btn.f-btn-success.f-state-active {
    background-color: #87b87f;
    border-color: #629b58;
}

.f-btn.f-btn-warning.f-state-default {
    background-color: #ffb752;
    border-color: #ffb752;
}

.f-btn.f-btn-warning.f-state-hover,
.f-btn.f-btn-warning.f-state-focus {
    background-color: #e59729;
    border-color: #ffb752;
}

.f-btn.f-btn-warning.f-state-active {
    background-color: #ffb752;
    border-color: #e59729;
}

.f-btn.f-btn-danger.f-state-default {
    background-color: #d15b47;
    border-color: #d15b47;
}

.f-btn.f-btn-danger.f-state-hover,
.f-btn.f-btn-danger.f-state-focus {
    background-color: #b74635;
    border-color: #d15b47;
}

.f-btn.f-btn-danger.f-state-active {
    background-color: #d15b47;
    border-color: #b74635;
}

.f-btn.f-btn-inverse.f-state-default {
    background-color: var(--color-PrimaryText);
    border-color: var(--color-PrimaryText);
}

.f-btn.f-btn-inverse.f-state-hover,
.f-btn.f-btn-inverse.f-state-focus {
    background-color: #303030;
    border-color: var(--color-PrimaryText);
}

.f-btn.f-btn-inverse.f-state-active {
    background-color: var(--color-PrimaryText);
    border-color: #303030;
}

.f-accordionpane-selected > .f-accordionpane-header,
.f-accordionpane-hover > .f-accordionpane-header {
    background-color: var(--color-BackgroundW);
    color: var(--color-Primary);
}

.f-accordionpane-selected > .f-accordionpane-header .f-icon,
.f-accordionpane-hover > .f-accordionpane-header .f-icon {
    color: var(--color-Primary);
}

/*
    .f-accordionpane-selected > .f-accordionpane-header:before,
    .f-accordionpane-hover > .f-accordionpane-header:before {
        display: block;
        content: "";
        position: absolute;
        top: -1px;
        bottom: 0;
        left: 0;
        width: 2px;
        max-width: 2px;
        overflow: hidden;
        background-color: #3382af;
    }
*/

.f-accordionpane > .f-panel-header > .f-panel-tools > .f-tool.f-toolicon-toggle .f-icon {
    font-size: 18px;
}

.f-accordionpane > .f-panel-header > .f-panel-tools > .f-tool.f-toolicon-toggle .f-icon:before {
    content: "\f106";
}

.f-accordionpane.f-panel-collapsed > .f-panel-header > .f-panel-tools .f-tool.f-toolicon-toggle .f-icon:before {
    content: "\f107";
}

.f-accordion.f-accordion-theme-simple > .f-panel-bodyct > .f-panel-body {
    background-color: var(--color-BackgroundW);
}

.f-accordion.f-accordion-theme-simple .f-accordionpane {
    margin-bottom: 5px;
    border-bottom-width: 0 !important;
}

.f-accordion.f-accordion-theme-simple .f-accordionpane .f-accordionpane-header {
    border-width: 0 0 0 1px !important;
    border-color: #d9d9d9;
    border-style: solid;
    background-color: #f3f3f3;
}

.f-accordion.f-accordion-theme-simple .f-accordionpane.f-accordionpane-hover .f-accordionpane-header {
    background-color: #fafafa;
}

.f-accordion.f-accordion-theme-simple .f-accordionpane.f-accordionpane-selected .f-accordionpane-header {
    border-left-width: 2px !important;
    border-color: #6eaed1;
    background-color: #edf3f7;
}

.f-mainheader .f-region-split-icon .f-icon {
    color: #438EB9;
}

.f-grid-row-alt {
    background-color: #fcfcfc;
}

/* .f-tabstrip-theme-simple */
.f-tabstrip-header-top.f-tabstrip.f-tabstrip-theme-simple > .f-tabstrip-header .f-tab-header.f-state-active {
    border-top-color: #4c8fbd !important;
    border-top-width: 2px;
    padding-top: 9px;
}

.f-tabstrip-header-bottom.f-tabstrip.f-tabstrip-theme-simple > .f-tabstrip-header .f-tab-header.f-state-active {
    border-bottom-width: 2px;
    border-bottom-color: #4c8fbd !important;
    padding-bottom: 7px;
}

/* .f-largemode .f-largespacemode */
.f-largemode .f-tabstrip-header-top.f-tabstrip.f-tabstrip-theme-simple > .f-tabstrip-header .f-tab-header.f-state-active,
.f-largespacemode .f-tabstrip-header-top.f-tabstrip.f-tabstrip-theme-simple > .f-tabstrip-header .f-tab-header.f-state-active {
    border-top-width: 3px;
    padding-top: 10px;
}

.f-largemode .f-tabstrip-header-bottom.f-tabstrip.f-tabstrip-theme-simple > .f-tabstrip-header .f-tab-header.f-state-active,
.f-largespacemode .f-tabstrip-header-bottom.f-tabstrip.f-tabstrip-theme-simple > .f-tabstrip-header .f-tab-header.f-state-active {
    border-bottom-width: 3px;
    padding-bottom: 8px;
}

.f-largemode .f-btn,
.f-largespacemode .f-btn {
    border-width: 3px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.f-largemode .f-btn.f-btn-small,
.f-largespacemode .f-btn.f-btn-small {
    border-width: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* .f-compactmode */
.f-compactmode .f-tabstrip-header-top.f-tabstrip.f-tabstrip-theme-simple > .f-tabstrip-header .f-tab-header.f-state-active {
    padding-top: 5px;
}

.f-compactmode .f-tabstrip-header-bottom.f-tabstrip.f-tabstrip-theme-simple > .f-tabstrip-header .f-tab-header.f-state-active {
    padding-bottom: 4px;
}

.f-compactmode .f-btn {
    border-width: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.f-compactmode .f-btn.f-btn-small {
    border-width: 1px;
}

/* Default page CSS */
/*
#header .icontopaction.nexttheme {
    background-color: #892e65;
}

    #header .icontopaction.nexttheme:hover {
        background-color: #762c59;
    }

#header .icontopaction.themes {
    background-color: #2e8965;
}

    #header .icontopaction.themes:hover {
        background-color: #2c7659;
    }

#header .userpicaction {
    background-color: #62a8d1;
}

    #header .userpicaction:hover {
        background-color: #579ec8;
    }
    */

.f-toolbar-buttonplain,
.f-toolbar-buttonplain .f-buttongroup .f-btn:after {
    border-color: #0A76C3 !important;
}

/* Special - MessageBoxIcon */
.f-messagebox-icon.f-messageicon-information,
.f-messagebox-icon.f-messageicon-question {
    color: var(--color-Primary);
}

.f-bgcolor,
body.f-bgcolor {
    background-color: var(--color-Background-1);
}

.f-grid-row.f-grid-row-newadded > .f-grid-cell:first-child > .f-grid-cell-inner:after {
    color: var(--color-Primary);
}

.f-grid-show-selected-cell .f-grid-cell-selected {
    background-color: #e2ebf3;
    color: var(--color-Primary);
}

.f-grid-show-selected-cell .f-grid-cell-selected .f-icon {
    color: var(--color-Primary);
}

.mainpanel .sidebarregion .leftregion,
.mainpanel .bodyregion .centerregion {
    border-width: 0;
    border-top-width: 1px;
    border-color: var(--color-BorderBase);
}

.mainpanel .bodyregion .centerregion .f-tabstrip-header {
    /*border-color: #efefef;*/
}
/*.mainpanel .bodyregion .centerregion .f-tabstrip-header .f-tabstrip-header-inkbar {
    bottom: -1px;
    top: auto;
}*/

.f-progressbar .f-progressbar-value {
    background-color: var(--color-Primary);
}

.f-progressbar-outer.f-progressbar-text-inside .f-progressbar-text {
    color: #fff;
}

.f-rate-star-half .f-rate-star-first .f-rate-star-icon,
.f-rate-star-full .f-rate-star-first .f-rate-star-icon,
.f-rate-star-full .f-rate-star-second .f-rate-star-icon {
    color: var(--color-Primary);
}
/*鼠标经过*/
.f-state-hover {
    transition: all .4s;
}
/* 行样式 */
.f-row {
    margin: 20px 0px;
    background-color: var(--color-BackgroundW);
}

.f-row:not(.f-grid) > .f-panel-bodyct {
    padding: 15px;
    overflow-x: hidden;
}
/* 按钮样式 */
.f-btn + .f-btn {
    margin-left: 10px;
}

.f-btn {
    border-width: 1px;
    border-style: solid;
    padding: 7px 15px;
}

.f-btn.f-state-default {
    border-color: var(--color-BorderBase);
}
/* 大按钮 */
.f-btn.f-btn-large {
    padding: 12px 20px;
}
/* 中等按钮 */
.f-btn.f-btn-medium {
    padding: 10px 20px;
}
/* 小按钮 */
.f-btn.f-btn-small {
    padding: 7px 15px;
}

.f-btn-Default.f-btn.f-state-default {
    background-color: var(--color-BackgroundW);
}

.f-btn-Default.f-btn.f-state-default .f-btn-text, .f-btn-Default.f-btn.f-state-default .f-icon {
    color: var(--color-PrimaryText);
}

.f-btn-Default.f-btn.f-state-default .f-btn-text, .f-btn-Default.f-btn.f-state-default .f-icon {
    color: #409eff;
}

.f-btn-Default.f-btn.f-state-hover {
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}

.f-btn-Primary.f-btn.f-state-default {
    background-color: var(--color-Primary);
}

.f-btn-Primary.f-btn.f-state-hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.f-btn-Primary.f-btn.f-state-hover .f-btn-text, .f-btn-Primary.f-btn.f-state-hover .f-icon {
    color: #fff;
}

.f-btn-Success.f-btn.f-state-default {
    background-color: var(--color-Success);
}

.f-btn-Success.f-btn.f-state-hover {
    background-color: #85ce61;
    border-color: #85ce61;
}

.f-btn-Info.f-btn.f-state-default {
    background-color: var(--color-Info);
}

.f-btn-Info.f-btn.f-state-hover {
    background-color: #a6a9ad;
    border-color: #a6a9ad;
}

.f-btn-Warning.f-btn.f-state-default {
    background-color: var(--color-Warning);
}

.f-btn-Warning.f-btn.f-state-hover {
    background-color: #ebb563;
    border-color: #ebb563;
}

.f-btn-Danger.f-btn.f-state-default {
    background-color: var(--color-Danger);
}

.f-btn-Danger.f-btn.f-state-hover {
    background-color: #f78989;
    border-color: #f78989;
}
/* 按钮结束 */

/* panel */
.f-panel-title-text {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

/* 表单 */
.f-corner-all.f-field-textbox {
    padding: 0px 15px;
    height: 40px;
    line-height: 40px;
}

.f-field-fieldlabel {
    text-align: right;
    line-height: 40px;
    padding: 0 12px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-RegularText);
    margin: 0px;
}

.f-corner-all.f-field-textbox:hover {
    border-color: var( --color-Placeholder);
}

.f-field.f-field-focus .f-state-focus {
    color: var(--color-PrimaryText);
}

.f-formrow:not(:last-child) {
    margin-bottom: 15px;
}

.f-panel-body .f-field {
    margin-bottom: 0px;
}

.f-toolbar {
    border-width: 0px;
    padding: 0px 20px 20px;
}

.f-toolbar.f-panel-toolbar-top, .f-toolbar.f-panel-toolbar-bottom {
    border-width: 0px;
    padding: 20px 20px;
}

.f-toolbar .f-btn {
    margin-left: 0px;
}

.f-form {
    border-color: var(--color-BorderBase);
    background-color: var(--color-BackgroundW);
    color: var(--color-RegularText);
}
.f-form .f-field-textbox {
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    border: 1px solid #dcdfe6;
    border-radius: 4px;
}

.f-form .f-field-textbox.fieldReadonly {
    border-color: rgba(0, 0, 0, 0);
}

/*表单错误项*/
.f-state-error.f-field-textbox {
    border-color: #f56c6c;
}
/*表单焦点*/
.f-form .f-field-focus .f-field-textbox {
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-width: 1px;
    border-color: rgba(64, 158, 255, .8);
}
/* 表单结束 */

/* 页签 */
.f-tab-header.f-state-active .f-panel-title-text {
    font-weight: 500;
    color: #409eff;
}

.f-tab-header:hover .f-panel-title-text, .f-tab-header:hover .f-panel-icon {
    color: #409eff;
}

.f-tab-header .f-panel-title-text {
    color: var(--color-PrimaryText);
    font-size: 14px;
    font-weight: 500;
}

.f-tab-header .f-panel-tools {
    top: calc(70% - 16px);
    padding: 0 0px;
}

/* 页签结束 */
/* 表格 */

.f-grid .f-grid-inner {
    padding: 0px 20px 20px;
}

.f-grid-colheader-text {
    font-weight: 600;
    line-height: 23px;
    color: var(--color-SecondaryText);
}

.f-grid-cell {
    padding: 12px 0px;
}

.f-grid-colheader {
    border: none;
}

.f-grid-colheader-inner {
    padding: 12px 0px;
}

.f-grid-row.f-state-hover {
    background-color: #f5f7fa;
}
/* 表格结束 */
body > div[id$='_wrapper'] > .f-panel.f-widget-content + body > div[id$='_wrapper'] > .f-panel.f-widget-content {
    margin-top: 20px;
}

body > div[id$='_wrapper'] + div[id$='_wrapper'] {
    margin-top: 20px;
}


.grid-tag {
    display: inline-block !important;
    margin-right: 5px;
    position: relative;
    top: unset !important;
    width: unset !important;
    padding: 0px 10px;
    color: #409eff;
    border-radius: 4px;
    border: 1px solid #d9ecff;
    background-color: #ecf5ff;
    margin: 2px;
}

.f-btn-Success.grid-tag {
    background-color: var(--color-Success);
    color:#FFF;
}

/*下一个元素间隔*/
.grid-tag + div {
    margin-top: 2px;
}

/*tag 下的 进度条*/
.grid-tag ~ .f-progressbar-outer .f-progressbar {
    margin-right: 22px;
}

.grid-tag ~ .f-progressbar-outer .f-progressbar-text {
    width: unset;
}